<template>
  <div class="distinct-main">
    <div class="distinct-head">
      <div class="head-title">
        客户去重
      </div>
    </div>
    <div class="distinct-container">
      <div class="distinct-card-main">
        <div class="distinct-card-head" :class="IsStep==2?`blue`:IsStep==3?`orange`:``">
          <div class="ch-left" v-if="IsStep==1">
            <img class="ch-left-icon" src="@/assets/images/pic_distinct_head_icon.png"/>
            <div>
              <div>检测重复客户，智能筛选一键删除</div>
              <span>只检测在线企微号的客户情况</span>
            </div>
          </div>
          <div class="ch-left" v-else-if="IsStep==2">
            <img class="ch-left-icon" src="@/assets/images/detectionLoad.png"/>
            <div>
              <div>正在检测群成员重复情况，请稍等</div>
              <span>关闭页面不影响检测进度</span>
            </div>
          </div>
          <div class="ch-left" v-else>
            <img class="ch-left-icon" src="@/assets/images/result.png"/>
            <div>
              <div>检测完成，您有0个重复群成员</div>
              <span>您可以选择各种方式来去重</span>
            </div>
          </div>
          <!--          未检测-->
          <div class="ch-right" v-if="IsStep==1">
            <el-checkbox>
              <span class="checkbox-text">忽略白名单客户</span>
            </el-checkbox>
            <el-button class="ch-button" size="small" @click="getSelectUser">开始检测</el-button>
          </div>
          <!--          正在检测-->
          <div class="ch-right" v-else-if="IsStep==2">
            <el-button class="ch-blue" size="small" :loading="true">正在检测</el-button>
            <el-button size="small">重新检测</el-button>
            <el-button size="small">取消检测</el-button>
          </div>
          <!--          检测完成-->
          <div class="ch-right" v-else>
            <el-button size="small">取消并返回</el-button>
            <el-button size="small">重新检测</el-button>
          </div>
        </div>
        <!--        未检测-->
        <div class="common_empty" v-if="IsStep==1">
          <img class="empty-cover" src="@/assets/images/pic_distinct_empty_cover.png"/>
          <span class="empty-text">请点击“开始检测”按钮，系统会检测客户情况</span>
        </div>
        <!--        正在检测-->
        <div class="common_empty" v-else-if="IsStep==2">
          <span class="empty-text">正在检测中...</span>
          <span class="empty-text">检测过程可能需要点时间，请稍后</span>
          <span class="empty-text">离开本页面不会中止检测任务</span>
        </div>
        <div class="content-big" v-else style="margin-top: 10px">
          <el-table
            :data="tableDataList"
            ref="customerMgtList"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              :label="item.label"
              align="left"
              v-for="(item, index) in tableColumns"
              :key="index"
              :prop="item.key"
              :min-width="item.minWidth ? item.minWidth : ``"
              :fixed="item.fixed ? item.fixed : false"
              :show-overflow-tooltip="true"
            >
              <!--用于表格自定义-->
              <template slot-scope="scope">
                <div v-if="item.key=='user'">
                  <div class="userInfo">
                    <img src="../../../assets/images/profile.jpg"/>
                    <div class="name">小城红</div>
                    <div class="label">@志新</div>
                  </div>
                </div>
                <div v-else-if="item.key=='chartGroup'">
                  <el-checkbox-group v-model="scope.row.ids">
                    <el-checkbox :label="item.userId" v-for="(item,index) in scope.row.groupList">
                      <div class="userInfo">
                        <img src="@/assets/images/profile.jpg"/>
                        <div class="name">{{ item.name }}</div>
                        <div class="label">@{{item.compeny}}</div>
                      </div>
                    </el-checkbox>
                  </el-checkbox-group>

                </div>
                <div v-else>{{ scope.row[item.key] }}</div>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="250">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="getSelectAll(scope.row,scope.$index)">全选</el-button>
                <el-button type="text" size="small">加入黑名单</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

      </div>
    </div>
    <selectUser v-if="showAddTask" :visableIf.sync="showAddTask"></selectUser>
  </div>
</template>
<script>
import {listUser} from "@/api/system/user";

export default {
  name: 'index',
  components: {
    'selectUser': () => import('./selectUser.vue'),
    'minOrMaxNumber': () => import('@/views/components/minOrMaxNumber.vue'),//导出弹窗
  },
  data() {
    return {
      IsStep: 3,//1:没有检测，2：正在检测 3：检测完毕
      showAddTask: false,
      checked: false,
      // 查询参数
      input3: null,//群查找
      radio: null,//
      relevantList: [
        {value: '1', label: '非好友',},
        {value: '2', label: '正常',},
        {value: '3', label: '未验证好友',},
        {value: '4', label: '拉黑',},
        {value: '5', label: '流失',},
      ],
      weChartList: [
        {value: 1, label: '是'},
        {value: 2, label: '否'}
      ],
      typeList: [
        {value: '1', label: '个人微信',},
        {value: '2', label: '企业微信',},
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: 1,
        userName2: null,
        userName3: null,
        userName4: null,
        userName5: null,
        userName6: null,
        userName7: null,
        userName8: null,
        userName9: null,
        userName10: null,
        userName11: null,
        userName12: null,
        userName13: null,
        userName14: null,
      },
      tableColumns: [
        {key: 'user', label: `客户`, visible: true, minWidth: 150, fixed: true},
        {key: 'chartGroup', label: `所属企微号`, visible: true, minWidth: 300, fixed: false},
      ],
      tableDataList: [],
      lableOpt: [
        {
          value: 1, label: '客户等级', children: [
            {value: 3, label: '核心',},
            {value: 4, label: '重要',},
            {value: 5, label: '一般',}
          ]
        },
        {
          value: 2, label: '客户等级2', children: [
            {value: 6, label: '可爱',},
            {value: 7, label: '知性',},
            {value: 8, label: '性感',}
          ]
        }
      ],
      sexList: [
        //性别
        {id: 1, name: "男"},
        {id: 2, name: "女"},
        {id: 3, name: "未知"},
      ],
      total: 8, // 表格的总条数
      multipleSelection: [],//表格多选
      showSelectSmartTags: false,//智能标签
      tableHeight: 600,
      dateRange1: [],
    }
  },
  created() {
    this.tableDataList = [];
    for (let i = 0; i < 10; i++) {
      let obj = {
        user: '小红',
        chartGroup: '',
        id: i + 1,
        groupList: [
          {userId: 1, name: '小红', compeny: '锐行科技',},
          {userId: 2, name: '小军', compeny: '智星',},
        ],
        ids: [],
      }
      this.tableDataList.push(obj);
    }
  },
  mounted() {
  },
  watch: {},
  methods: {
    getNumber(obj) {
      console.log('获取最大值', obj);
    },
    getSelectUser() {
      console.log('点击');
      this.showAddTask = true;
      console.log('this.showAddTask', this.showAddTask);

    },
    getSelectAll(row, index) {
      console.log('row', row);
      this.tableDataList[index].ids = [];
      row.groupList.forEach(item => {
        this.tableDataList[index].ids.push(item.userId);
      })
    },
    getList() {
      this.loading = true;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    // 表单重置
    reset() {
      this.form = {
        userId: undefined,
        deptId: undefined,
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        email: undefined,
        sex: undefined,
        status: "0",
        remark: undefined,
        postIds: [],
        roleIds: []
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.queryParams.deptId = undefined;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(val) {
      this.multipleSelection = [];
      if (val && val.length > 0) {
        val.forEach((item) => {
          this.multipleSelection.push(item.id);
        })
        console.log('multipleSelection', this.multipleSelection);
      }
    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false);
      this.$emit('handleQuery');
    }
  }
}
</script>
<style lang="scss" scoped>
.distinct-main {
  overflow: auto;
  flex: 1 1;
  position: relative;

  .distinct-head {
    height: 46px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px;

    .head-title {
      font-size: 14px;
      line-height: 22px;
      font-weight: 600;

      .example-text {
        color: #2f54eb;
        cursor: pointer;
        margin-left: 8px;;
        font-weight: 400;

        &:hover + .example-modal {
          display: block;
        }
      }
    }
  }

  .distinct-container {
    padding: 12px;
    height: calc(100vh - 90px);
    width: 100%;
    font-size: 14px;
    line-height: 22px;
    overflow-y: auto;

    .distinct-card-main {
      background-color: #fff;
      font-size: 14px;
      line-height: 22px;
      max-width: 1200px;
      margin: 8px auto;

      .distinct-card-head {
        width: 100%;
        padding: 0 20px;
        height: 120px;
        background: url('../../../assets/images/pic_distinct_head_bg.png') no-repeat 50% / cover #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;

        &.blue {
          background: url('../../../assets/images/detection-bg2.png') no-repeat 50% / cover #fff;
        }

        &.orange {
          background: url('../../../assets/images/detection-bg3.png') no-repeat 50% / cover #fff;
        }

        .ch-left {
          display: flex;
          align-items: center;

          .ch-left-icon {
            width: 50px;
            height: 50px;
            margin-right: 16px;
          }

          div {
            font-size: 20px;
            color: rgba(0, 0, 0, .85);
            line-height: 28px;
            margin-bottom: 4px;
          }

          span {
            font-size: 14px;
            color: rgba(6, 15, 35, .45);
            line-height: 22px;
          }
        }

        .ch-right {
          .checkbox-text {
            color: rgba(0, 0, 0, .65);
            font-size: 14px;
          }

          .ch-button {
            margin-left: 16px;
            background: #00c270;
            color: #fff;
          }

          .ch-blue {
            margin-left: 16px;
            background: #5993ff;
            color: #fff;
          }
        }
      }

      .common_empty {
        width: 100%;
        padding: 80px 0;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;

        .empty-cover {
          width: 60px;
          height: 60px;
        }

        .empty-text {
          max-width: 50%;
          font-size: 14px;
          color: rgba(0, 0, 0, .25);
          line-height: 22px;
          margin-top: 12px;
        }
      }
    }
  }
}

.search {
  display: flex;

  ::v-deep.el-input__inner {
    border-right: none !important;
    border-radius: 4px 0px 0px 0px;
  }

  ::v-deep .el-button--default {
    border-radius: 0px 4px 4px 0px;
    padding: 0px 10px;
  }
}

.el-form {
  padding: 10px;
  background: #fff;
  border-radius: 8px;

  .el-form-item {
    margin-bottom: 10px;

    ::v-deep .el-form-item__content {
      line-height: 30px;
    }

    .right-big {
      border-radius: 4px;
      border: 1px solid #DCDFE6;
      padding-left: 11px;
      position: relative;

      > span {
        width: 89px;
        display: inline-block;
        white-space: nowrap;
        position: absolute;
        z-index: 7;
        color: rgba(0, 0, 0, .45);
      }

      ::v-deep .el-input--small .el-input__inner {
        line-height: 29px;
        height: 29px;
      }

      .el-select {
        width: 240px;

        ::v-deep .el-input__inner {
          border: none;
          padding-left: 85px;
          background: none;
        }
      }

      .el-input {
        width: 240px;

        ::v-deep .el-input__inner {
          border: none;
          padding-left: 85px;
          background: none;
        }
      }

      ::v-deep .el-date-editor {
        border: none;
        padding-left: 100px;
      }
    }

  }
}

.mySelf {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px 15px;

  ::v-deep .el-form-item__content {
    flex: 1;
  }

  margin-bottom: 10px;
}

.userInfo {
  border-radius: 4px;
  margin: 8px 0;
  cursor: pointer;
  position: relative;
  padding-left: 50px;
  font-size: 14px;
  list-style: none;
  text-align: left;

  img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    left: 0px;
    top: 0px;
    position: absolute;
  }

  .name {
    color: #888;
  }

  .label {
    margin-top: 2px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #f90;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.el-checkbox-group {
  display: flex;

  .el-checkbox {
    display: flex;
    align-items: center;

    ::v-deep .el-checkbox__input {
      margin-top: 10px;
    }
  }
}
</style>
